<template>
  <div class="image-with-marks">
    <canvas ref="canvas" v-show="false"></canvas>
    <canvas ref="croppedCanvas" style="border: 1px solid red"> </canvas>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";

const props = defineProps({
  imageUrl: {
    type: String,
    required: true,
  },
  marks: {
    type: Array,
    default: () => [],
  },
  displaySize: {
    type: Object,
    default: () => ({ width: 220, height: 220 }),
  },
  cropExpandSize: {
    type: Number,
    default: 10,
  },
  borderColor: {
    // 新增prop：用于传递边框颜色
    type: String,
    default: "#FF0000", // 默认值为红色
  },
  lineWidth: {
    type: Number,
    default: 2,
  },
  lineStyle: {
    type: String,
    default: "dashed", // 默认值为实线
    validator: function (value) {
      // 这个 prop 只能是 'solid' 或 'dashed'
      return ["solid", "dashed"].indexOf(value) !== -1;
    },
  },
});
const imgWidth = ref(null);
const imgHeight = ref(null);
const canvas = ref(null);
const ctx = ref(null);

onMounted(() => {
  loadAndDrawImage();
});

watch(
  () => [
    props.borderColor,
    props.lineStyle,
    props.cropExpandSize,
    props.lineWidth,
  ],
  (newColor) => {
    // 当 borderColor 改变时触发的回调函数
    // 这里可以调用重新绘制的方法或进行其他处理
    loadAndDrawImage();
  }
);
const loadAndDrawImage = () => {
  ctx.value = canvas.value.getContext("2d");
  const img = new Image();
  img.src = props.imageUrl;

  // 确保图片加载完成之后再进行绘制
  img.onload = () => {
    imgWidth.value = img.width; // 获取图片实际宽度
    imgHeight.value = img.height; // 获取图片实际高度

    drawImageAndMarks(img);
  };
};

function drawImageAndMarks(img) {
  // 设置画布大小为显示尺寸
  canvas.value.width = props.displaySize.width;
  canvas.value.height = props.displaySize.height;

  // 计算缩放因子
  const scaleX = props.displaySize.width / imgWidth.value;
  const scaleY = props.displaySize.height / imgHeight.value;

  // 绘制图片
  ctx.value.drawImage(
    img,
    0,
    0,
    props.displaySize.width,
    props.displaySize.height
  );
  applyLineStyle(); // 应用线条样式

  // 绘制对应的标记
  props.marks.forEach((mark) => {
    switch (mark.shape_type) {
      case "rect":
        drawScaledRectangle(mark, scaleX, scaleY);
        break;
      case "circle":
        drawScaledCircle(mark, scaleX, scaleY);
        break;
      case "point":
        drawScaledPoint(mark, scaleX, scaleY);
        break;
      case "polygon":
        drawScaledPolygon(mark, scaleX, scaleY);
        break;
      case "line":
        drawScaledLine(mark, scaleX, scaleY);
        break;
      case "curve":
        drawScaledCurveLine(mark, scaleX, scaleY);
        break;
      case "rect_line_combination":
        drawScaledRectLineCombination(mark, scaleX, scaleY);
        break;
      default:
        console.warn(`Unknown mark type: ${mark.type}`);
    }
  });
}
//虚实线
function applyLineStyle() {
  if (props.lineStyle === "dashed") {
    ctx.value.setLineDash([5, 5]); // 设置虚线模式
  } else {
    ctx.value.setLineDash([]); // 清除任何线段模式，即实线
  }
}

// 定义裁剪后的画布
const croppedCanvas = ref(null);
//矩形
function drawScaledRectangle({ rect }, scaleX, scaleY) {
  if (rect) {
    const [x1, y1, x2, y2] = rect.split(",").map(Number);
    const scaledX1 = x1 * scaleX;
    const scaledY1 = y1 * scaleY;
    const scaledWidth = Math.abs((x2 - x1) * scaleX);
    const scaledHeight = Math.abs((y2 - y1) * scaleY);

    ctx.value.strokeStyle = props.borderColor; // 使用从props接收到的边框颜色
    ctx.value.lineWidth = props.lineWidth;
    ctx.value.strokeRect(scaledX1, scaledY1, scaledWidth, scaledHeight);

    // 矩形坐标
    let expandedRectX =
      props.cropExpandSize == 100
        ? 0
        : Math.max(0, scaledX1 - props.cropExpandSize);
    let expandedRectY =
      props.cropExpandSize == 100
        ? 0
        : Math.max(0, scaledY1 - props.cropExpandSize);
    //矩形尺寸
    let expandedRectWidth =
      props.cropExpandSize == 100
        ? ctx.value.canvas.width
        : Math.min(
            ctx.value.canvas.width - expandedRectX,
            scaledWidth + 2 * props.cropExpandSize
          );
    let expandedRectHeight =
      props.cropExpandSize == 100
        ? ctx.value.canvas.height
        : Math.min(
            ctx.value.canvas.height - expandedRectY,
            scaledHeight + 2 * props.cropExpandSize
          );
    // 设置新的 Canvas 的宽度和高度为缩放后的矩形大小
    croppedCanvas.value.width = ctx.value.canvas.width;
    croppedCanvas.value.height = ctx.value.canvas.height;

    // 计算裁剪区域的缩放比例，保持宽高比
    const scale = Math.min(
      croppedCanvas.value.width / expandedRectWidth,
      croppedCanvas.value.height / expandedRectHeight
    );

    const croppedCtx = croppedCanvas.value.getContext("2d");
    croppedCtx.clearRect(
      0,
      0,
      croppedCanvas.value.width,
      croppedCanvas.value.height
    ); // 清除画布

    // 将原始画布中的矩形区域裁剪并绘制到新的 Canvas 上
    croppedCtx.drawImage(
      ctx.value.canvas,
      expandedRectX, // 源矩形左上角 X 坐标
      expandedRectY, // 源矩形左上角 Y 坐标
      expandedRectWidth, // 源矩形宽度
      expandedRectHeight, // 源矩形高度
      (croppedCanvas.value.width - expandedRectWidth * scale) / 2, // 目标矩形的左上角 X 坐标，居中对齐
      (croppedCanvas.value.height - expandedRectHeight * scale) / 2, // 目标矩形的左上角 Y 坐标，居中对齐
      expandedRectWidth * scale, // 目标矩形的宽度
      expandedRectHeight * scale // 目标矩形的高度
    );
  }
}
//圆形
function drawScaledCircle({ center, radius }, scaleX, scaleY) {
  if (center && radius) {
    const [cx, cy] = center.split(",").map(Number);
    const scaledCx = cx * scaleX;
    const scaledCy = cy * scaleY;
    const scaledRadius = Number(radius) * ((scaleX + scaleY) / 2); // 平均缩放

    ctx.value.beginPath();
    ctx.value.arc(scaledCx, scaledCy, scaledRadius, 0, 2 * Math.PI);
    ctx.value.strokeStyle = props.borderColor; // 使用从props接收到的边框颜色
    ctx.value.lineWidth = props.lineWidth;
    ctx.value.stroke();

    // 计算圆的坐标
    let expandedRectX =
      props.cropExpandSize == 100
        ? 0
        : Math.max(0, scaledCx - props.cropExpandSize - scaledRadius);
    let expandedRectY =
      props.cropExpandSize == 100
        ? 0
        : Math.max(0, scaledCy - props.cropExpandSize - scaledRadius);
    //计算圆的大小
    let expandedRectWidth =
      props.cropExpandSize == 100
        ? ctx.value.canvas.width
        : Math.min(
            ctx.value.canvas.width - expandedRectX,
            2 * scaledRadius + 2 * props.cropExpandSize
          );
    let expandedRectHeight =
      props.cropExpandSize == 100
        ? ctx.value.canvas.height
        : Math.min(
            ctx.value.canvas.height - expandedRectY,
            scaledRadius * 2 + 2 * props.cropExpandSize
          );
    // 设置新的 Canvas 的宽度和高度为缩放后的矩形大小
    croppedCanvas.value.width = ctx.value.canvas.width;
    croppedCanvas.value.height = ctx.value.canvas.height;

    // 计算裁剪区域的缩放比例，保持宽高比
    const scale = Math.min(
      croppedCanvas.value.width / expandedRectWidth,
      croppedCanvas.value.height / expandedRectHeight
    );

    const croppedCtx = croppedCanvas.value.getContext("2d");
    croppedCtx.clearRect(
      0,
      0,
      croppedCanvas.value.width,
      croppedCanvas.value.height
    ); // 清除画布

    // 将原始画布中的矩形区域裁剪并绘制到新的 Canvas 上
    croppedCtx.drawImage(
      ctx.value.canvas,
      expandedRectX, // 源矩形左上角 X 坐标
      expandedRectY, // 源矩形左上角 Y 坐标
      expandedRectWidth, // 源矩形宽度
      expandedRectHeight, // 源矩形高度
      (croppedCanvas.value.width - expandedRectWidth * scale) / 2, // 目标矩形的左上角 X 坐标，居中对齐
      (croppedCanvas.value.height - expandedRectHeight * scale) / 2, // 目标矩形的左上角 Y 坐标，居中对齐
      expandedRectWidth * scale, // 目标矩形的宽度
      expandedRectHeight * scale // 目标矩形的高度
    );
  }
}
//点
function drawScaledPoint({ point }, scaleX, scaleY) {
  if (point) {
    const [px, py] = point.split(",").map(Number);
    const scaledPx = px * scaleX;
    const scaledPy = py * scaleY;

    ctx.value.fillStyle = props.borderColor; // 使用从props接收到的边框颜色
    ctx.value.fillRect(scaledPx - 1, scaledPy - 1, 3, 3); // 小红点
  }
}

//多边形
function drawScaledPolygon({ polygon }, scaleX, scaleY) {
  if (polygon) {
    let linePoints = Object.values(polygon);
    console.log("polygon", polygon);
    const [x1, y1] = linePoints[0].split(",").map(Number);
    ctx.value.beginPath();
    ctx.value.moveTo(x1 * scaleX, y1 * scaleY);
    linePoints.slice(1, linePoints.length).forEach((i) => {
      const [x1, y1] = i.split(",").map(Number);
      ctx.value.lineTo(x1 * scaleX, y1 * scaleY);
    });
    ctx.value.strokeStyle = props.borderColor; // 使用从props接收到的边框颜色
    ctx.value.lineWidth = props.lineWidth;
    ctx.value.closePath();
    ctx.value.stroke();
    const { minX, maxX, minY, maxY } = findMinAndMaxXAndY(linePoints);
    const width = maxX - minX;
    const height = maxY - minY;

    // 计算线的x,y坐标
    let expandedRectX =
      props.cropExpandSize == 100
        ? 0
        : Math.max(0, minX * scaleX - props.cropExpandSize);
    let expandedRectY =
      props.cropExpandSize == 100
        ? 0
        : Math.max(0, minY * scaleY - props.cropExpandSize);
    // 计算线的宽高
    let expandedRectWidth =
      props.cropExpandSize == 100
        ? ctx.value.canvas.width
        : Math.min(
            ctx.value.canvas.width - expandedRectX,
            width * scaleX + 2 * props.cropExpandSize
          );
    let expandedRectHeight =
      props.cropExpandSize == 100
        ? ctx.value.canvas.height
        : Math.min(
            ctx.value.canvas.height - expandedRectY,
            height * scaleY + 2 * props.cropExpandSize
          );
    // 设置新的 Canvas 的宽度和高度为缩放后的矩形大小
    croppedCanvas.value.width = ctx.value.canvas.width;
    croppedCanvas.value.height = ctx.value.canvas.height;

    // 计算裁剪区域的缩放比例，保持宽高比
    const scale = Math.min(
      croppedCanvas.value.width / expandedRectWidth,
      croppedCanvas.value.height / expandedRectHeight
    );

    const croppedCtx = croppedCanvas.value.getContext("2d");
    croppedCtx.clearRect(
      0,
      0,
      croppedCanvas.value.width,
      croppedCanvas.value.height
    ); // 清除画布

    // 将原始画布中的矩形区域裁剪并绘制到新的 Canvas 上
    croppedCtx.drawImage(
      ctx.value.canvas,
      expandedRectX, // 源矩形左上角 X 坐标
      expandedRectY, // 源矩形左上角 Y 坐标
      expandedRectWidth, // 源矩形宽度
      expandedRectHeight, // 源矩形高度
      (croppedCanvas.value.width - expandedRectWidth * scale) / 2, // 目标矩形的左上角 X 坐标，居中对齐
      (croppedCanvas.value.height - expandedRectHeight * scale) / 2, // 目标矩形的左上角 Y 坐标，居中对齐
      expandedRectWidth * scale, // 目标矩形的宽度
      expandedRectHeight * scale // 目标矩形的高度
    );
  }
}
//计算最小x和y 和最大x和y
function findMinAndMaxXAndY(points) {
  let minX = Infinity;
  let maxX = -Infinity;
  let minY = Infinity;
  let maxY = -Infinity;

  points.forEach((point) => {
    const [x, y] = point.split(",").map(Number); // 将字符串分割并转换为数字

    if (x < minX) minX = x; // 更新最小x坐标
    if (x > maxX) maxX = x; // 更新最大x坐标
    if (y < minY) minY = y; // 更新最小y坐标
    if (y > maxY) maxY = y; // 更新最大y坐标
  });

  return { minX, maxX, minY, maxY };
}

// 线
function drawScaledLine({ line }, scaleX, scaleY) {
  if (line) {
    let linePoints = Object.values(line);
    const [x1, y1] = linePoints[0].split(",").map(Number);
    ctx.value.beginPath();
    ctx.value.moveTo(x1 * scaleX, y1 * scaleY);
    linePoints.slice(1, linePoints.length).forEach((i) => {
      const [x1, y1] = i.split(",").map(Number);
      ctx.value.lineTo(x1 * scaleX, y1 * scaleY);
    });
    ctx.value.strokeStyle = props.borderColor; // 使用从props接收到的边框颜色
    ctx.value.lineWidth = props.lineWidth;
    ctx.value.stroke();

    const { minX, maxX, minY, maxY } = findMinAndMaxXAndY(linePoints);
    const width = maxX - minX;
    const height = maxY - minY;

    // 计算线的x,y坐标
    let expandedRectX =
      props.cropExpandSize == 100
        ? 0
        : Math.max(0, minX * scaleX - props.cropExpandSize);
    let expandedRectY =
      props.cropExpandSize == 100
        ? 0
        : Math.max(0, minY * scaleY - props.cropExpandSize);
    // 计算线的宽高
    let expandedRectWidth =
      props.cropExpandSize == 100
        ? ctx.value.canvas.width
        : Math.min(
            ctx.value.canvas.width - expandedRectX,
            width * scaleX + 2 * props.cropExpandSize
          );
    let expandedRectHeight =
      props.cropExpandSize == 100
        ? ctx.value.canvas.height
        : Math.min(
            ctx.value.canvas.height - expandedRectY,
            height * scaleY + 2 * props.cropExpandSize
          );
    // 设置新的 Canvas 的宽度和高度为缩放后的矩形大小
    croppedCanvas.value.width = ctx.value.canvas.width;
    croppedCanvas.value.height = ctx.value.canvas.height;

    // 计算裁剪区域的缩放比例，保持宽高比
    const scale = Math.min(
      croppedCanvas.value.width / expandedRectWidth,
      croppedCanvas.value.height / expandedRectHeight
    );

    const croppedCtx = croppedCanvas.value.getContext("2d");
    croppedCtx.clearRect(
      0,
      0,
      croppedCanvas.value.width,
      croppedCanvas.value.height
    ); // 清除画布

    // 将原始画布中的矩形区域裁剪并绘制到新的 Canvas 上
    croppedCtx.drawImage(
      ctx.value.canvas,
      expandedRectX, // 源矩形左上角 X 坐标
      expandedRectY, // 源矩形左上角 Y 坐标
      expandedRectWidth, // 源矩形宽度
      expandedRectHeight, // 源矩形高度
      (croppedCanvas.value.width - expandedRectWidth * scale) / 2, // 目标矩形的左上角 X 坐标，居中对齐
      (croppedCanvas.value.height - expandedRectHeight * scale) / 2, // 目标矩形的左上角 Y 坐标，居中对齐
      expandedRectWidth * scale, // 目标矩形的宽度
      expandedRectHeight * scale // 目标矩形的高度
    );
  }
}

//曲线
function drawScaledCurveLine({ line }, scaleX, scaleY) {
  if (line) {
    let linePoints = Object.values(line);
    const points = linePoints.map((p) => p.split(",").map(Number));

    ctx.value.beginPath();
    // 移动到起点
    ctx.value.moveTo(points[0][0] * scaleX, points[0][1] * scaleY);

    for (let i = 1; i < points.length - 1; i++) {
      // 计算中间控制点，这里简单地取当前点和下一个点的中点
      const cpX = ((points[i][0] + points[i + 1][0]) / 2) * scaleX;
      const cpY = ((points[i][1] + points[i + 1][1]) / 2) * scaleY;

      // 绘制二次贝塞尔曲线到下一个点
      ctx.value.quadraticCurveTo(
        points[i][0] * scaleX,
        points[i][1] * scaleY,
        cpX,
        cpY
      );
    }

    // 如果有超过两个点，则绘制最后一段到终点
    if (points.length > 2) {
      ctx.value.lineTo(
        points[points.length - 1][0] * scaleX,
        points[points.length - 1][1] * scaleY
      );
    } else if (points.length === 2) {
      // 如果只有两个点，直接画一条线段
      ctx.value.lineTo(points[1][0] * scaleX, points[1][1] * scaleY);
    }

    // 设置样式并绘制路径
    ctx.value.strokeStyle = props.borderColor; // 使用从props接收到的边框颜色
    ctx.value.lineWidth = props.lineWidth;
    ctx.value.stroke();

    const { minX, maxX, minY, maxY } = findMinAndMaxXAndY(linePoints);
    const width = maxX - minX;
    const height = maxY - minY;

    // 计算线的x,y坐标
    let expandedRectX =
      props.cropExpandSize == 100
        ? 0
        : Math.max(0, minX * scaleX - props.cropExpandSize);
    let expandedRectY =
      props.cropExpandSize == 100
        ? 0
        : Math.max(0, minY * scaleY - props.cropExpandSize);
    // 计算线的宽高
    let expandedRectWidth =
      props.cropExpandSize == 100
        ? ctx.value.canvas.width
        : Math.min(
            ctx.value.canvas.width - expandedRectX,
            width * scaleX + 2 * props.cropExpandSize
          );
    let expandedRectHeight =
      props.cropExpandSize == 100
        ? ctx.value.canvas.height
        : Math.min(
            ctx.value.canvas.height - expandedRectY,
            height * scaleY + 2 * props.cropExpandSize
          );
    // 设置新的 Canvas 的宽度和高度为缩放后的矩形大小
    croppedCanvas.value.width = ctx.value.canvas.width;
    croppedCanvas.value.height = ctx.value.canvas.height;

    // 计算裁剪区域的缩放比例，保持宽高比
    const scale = Math.min(
      croppedCanvas.value.width / expandedRectWidth,
      croppedCanvas.value.height / expandedRectHeight
    );

    const croppedCtx = croppedCanvas.value.getContext("2d");
    croppedCtx.clearRect(
      0,
      0,
      croppedCanvas.value.width,
      croppedCanvas.value.height
    ); // 清除画布

    // 将原始画布中的矩形区域裁剪并绘制到新的 Canvas 上
    croppedCtx.drawImage(
      ctx.value.canvas,
      expandedRectX, // 源矩形左上角 X 坐标
      expandedRectY, // 源矩形左上角 Y 坐标
      expandedRectWidth, // 源矩形宽度
      expandedRectHeight, // 源矩形高度
      (croppedCanvas.value.width - expandedRectWidth * scale) / 2, // 目标矩形的左上角 X 坐标，居中对齐
      (croppedCanvas.value.height - expandedRectHeight * scale) / 2, // 目标矩形的左上角 Y 坐标，居中对齐
      expandedRectWidth * scale, // 目标矩形的宽度
      expandedRectHeight * scale // 目标矩形的高度
    );
  }
}

//框内点

function drawScaledRectLineCombination({ rect, rect_in }, scaleX, scaleY) {
  drawScaledLine({ line: rect_in }, scaleX, scaleY);
  drawScaledRectangle({ rect }, scaleX, scaleY);
}
</script>

<!-- <script>
export default {
  name: "ImageWithMarks",
  props: {
    imageUrl: {
      type: String,
      required: true,
    },
    marks: {
      type: Array,
      default: () => [],
    },
    displaySize: {
      type: Object,
      default: () => ({ width: 100, height: 100 }),
    },
    borderColor: {
      // 新增prop：用于传递边框颜色
      type: String,
      default: "#FF0000", // 默认值为红色
    },
  },
  data() {
    return {
      imgWidth: null,
      imgHeight: null,
      canvas: null,
      ctx: null,
    };
  },

  mounted() {
    this.loadAndDrawImage();
  },
  methods: {
    loadAndDrawImage() {
      this.canvas = this.$refs.canvas;
      this.ctx = this.canvas.getContext("2d");
      const img = new Image();
      img.src = this.imageUrl;

      // 确保图片加载完成之后再进行绘制
      img.onload = () => {
        this.imgWidth = img.width; // 获取图片实际宽度
        this.imgHeight = img.height; // 获取图片实际高度

        this.drawImageAndMarks(img);
      };
    },
    drawImageAndMarks(img) {
      // 设置画布大小为显示尺寸
      this.canvas.width = this.displaySize.width;
      this.canvas.height = this.displaySize.height;

      // 计算缩放因子
      const scaleX = this.displaySize.width / this.imgWidth;
      const scaleY = this.displaySize.height / this.imgHeight;

      // 绘制图片
      this.ctx.drawImage(
        img,
        0,
        0,
        this.displaySize.width,
        this.displaySize.height
      );

      // 绘制对应的标记
      this.marks.forEach((mark) => {
        switch (mark.type) {
          case "rect":
            this.drawScaledRectangle(mark, scaleX, scaleY);
            break;
          case "circle":
            this.drawScaledCircle(mark, scaleX, scaleY);
            break;
          case "point":
            this.drawScaledPoint(mark, scaleX, scaleY);
            break;
          case "polygon":
            this.drawScaledPolygon(mark, scaleX, scaleY);
            break;
          case "line":
            this.drawScaledLine(mark, scaleX, scaleY);
            break;
          default:
            console.warn(`Unknown mark type: ${mark.type}`);
        }
      });
    },
    drawScaledRectangle({ rect }, scaleX, scaleY) {
      if (rect) {
        const [x1, y1, x2, y2] = rect.split(",").map(Number);
        const scaledX1 = x1 * scaleX;
        const scaledY1 = y1 * scaleY;
        const scaledWidth = Math.abs((x2 - x1) * scaleX);
        const scaledHeight = Math.abs((y2 - y1) * scaleY);

        this.ctx.strokeStyle = this.borderColor; // 使用从props接收到的边框颜色
        this.ctx.lineWidth = 2;
        this.ctx.strokeRect(scaledX1, scaledY1, scaledWidth, scaledHeight);
      }
    },
    drawScaledCircle({ center, radius }, scaleX, scaleY) {
      if (center && radius) {
        const [cx, cy] = center.split(",").map(Number);
        const scaledCx = cx * scaleX;
        const scaledCy = cy * scaleY;
        const scaledRadius = Number(radius) * ((scaleX + scaleY) / 2); // 平均缩放

        this.ctx.beginPath();
        this.ctx.arc(scaledCx, scaledCy, scaledRadius, 0, 2 * Math.PI);
        this.ctx.strokeStyle = this.borderColor; // 使用从props接收到的边框颜色
        this.ctx.lineWidth = 2;
        this.ctx.stroke();
      }
    },
    drawScaledPoint({ point }, scaleX, scaleY) {
      if (point) {
        const [px, py] = point.split(",").map(Number);
        const scaledPx = px * scaleX;
        const scaledPy = py * scaleY;

        this.ctx.fillStyle = this.borderColor; // 使用从props接收到的边框颜色
        this.ctx.fillRect(scaledPx - 1, scaledPy - 1, 3, 3); // 小红点
      }
    },
    drawScaledPolygon({ points }, scaleX, scaleY) {
      if (points) {
        const parsedPoints = points
          .split(" ")
          .map((point) => point.split(",").map(Number));

        this.ctx.beginPath();
        this.ctx.moveTo(
          ...parsedPoints[0].map(
            (value, i) => value * (i % 2 === 0 ? scaleX : scaleY)
          )
        );
        parsedPoints.forEach(([x, y]) =>
          this.ctx.lineTo(x * scaleX, y * scaleY)
        );
        this.ctx.closePath();
        this.ctx.strokeStyle = this.borderColor; // 使用从props接收到的边框颜色
        this.ctx.lineWidth = 2;
        this.ctx.stroke();
      }
    },
    drawScaledLine({ line }, scaleX, scaleY) {
      if (line) {
        const [x1, y1, x2, y2] = line.split(",").map(Number);

        this.ctx.beginPath();
        this.ctx.moveTo(x1 * scaleX, y1 * scaleY);
        this.ctx.lineTo(x2 * scaleX, y2 * scaleY);
        this.ctx.strokeStyle = this.borderColor; // 使用从props接收到的边框颜色
        this.ctx.lineWidth = 2;
        this.ctx.stroke();
      }
    },
  },
};
</script> -->

<style scoped>
.image-with-marks {
}
</style>
